<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blurred Ring on Canvas</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <button id="downloadBtn">下载图片</button>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 中心点和半径
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const innerRadius = 60;
        const outerRadius = 100;

        // 画多个同心圆以实现模糊效果
        for (let i = 0; i < 50; i++) {
            const radius = innerRadius + (outerRadius - innerRadius) * (i / 50);
            const alpha = 1 - (i / 50);
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
            ctx.strokeStyle = `rgba(0, 0, 255, ${alpha})`; // 颜色为蓝色，透明度递减
            ctx.lineWidth = 2;
            ctx.stroke();
        }

        // 点击按钮下载图像
        document.getElementById('downloadBtn').addEventListener('click', function() {
            // 将Canvas内容转换为Data URL
            const dataURL = canvas.toDataURL('image/png');
            // 创建一个隐藏的链接
            const link = document.createElement('a');
            link.href = dataURL;
            link.download = 'canvas_image.png'; // 设置下载文件的名称
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
    </script>
</body>
</html>